<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Poi点 - batchUpdate 示例</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
            font-family: 'Arial', sans-serif;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    // 初始化地图应用
    window.app = new GE.App('mapContainer', {
        position: [120.152925, 30.248748, 1500], // 相机的位置  
        lookAt: [120.152925, 30.248748, 0], // 相机看向的地图位置
        cameraScrollSpeed: 5, // 鼠标滚动时，控制相机移动的速度
        minZoom: 3, // 允许地图的最小层级
        maxZoom: 21, // 允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, // 是否使用瓦片默认纹理
        maxSlopeAngle: 80, // 地图最大倾斜角度
        baseLayer: [
            // 影像底图
            {
                url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', // 影像底图的url
                urlDecimal: true, // 影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', // 影像底图
                canNotSelect: false, // true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    // 创建POI点
    function createPOI() {
        // 创建一个基本的POI点
        let poi = new GE.Poi2({
            url: 'http://localhost:9000/examples/resources/images/warn.png',
            position: new GE.Point(120.152925, 30.248748, 10),
            // name: '111',
            // strokeStyle: '#000000',
            // strokeWidth: 2,
            // size: 1000,
            // isBold: true,
            // baseImageSize: 1200,
            // showText: true,
            // textStyle: '#DC143C',
            // textfont: 'sans-serif',
            // center: [0.5, 0.0],
            // backGroundStyle: '',
            // textOffsetX: 0,
            // textOffsetY: 0,
            // textPosition: 'bottom',
        });

        // 添加到地图
        app.add(poi);

        // 使用 batchUpdate 方法一次性更新多个参数
        poi.batchUpdate({
            text: {
                // name: 'POI点', // 设置名称为"点1"
                color: '#ff2300', // 设置文本颜色为白色
                size: 1000,
                isItalic: true, 
            },
            // offset: {
            //         x: 160,  // X轴偏移
            //         y: -200   // Y轴偏移
            // },
            shape: {
                type: 'circle', // 设置形状为圆形
                color: 'white',        // 填充色
                strokeColor: 'yellow',// 描边色
                strokeWidth: 2,      // 描边宽度
                size: 1.5            // 大小倍数
            },
            image: {
                url: '../assets/img/ed.png',
                // size: 1.5            // 大小倍数
            },
            // layout: {
            //     textPosition: 'image-only', // 设置文本位置在底部
            //     center: [0.5, 0]      // 锚点 (0-1范围)
            // },
            background: {
                color: '255, 255, 255', // 背景色
                opacity:0.1
                // shape: 'circle',          // 形状 (circle/rectangle)
                // size: 0.5                 // 大小倍数 (0.5-3.0)
            }
        });

        // 添加点击事件
        poi.setClick = function (e) {
            console.log('点击了POI:', e.object.config.name);
            console.log('点击了POI:', e.object.config);
        }

        return poi;
    }

    // 创建POI点
    const myPoi = createPOI();
    console.log('POI创建成功，使用batchUpdate方法设置了多个参数');
</script>

</html>